<template>
    <div class="live">
      <img class="label" src="../assets/img/bisaishikuang@2x.png" />
      <img class="close" src="../assets/img/butuisong@2x.png" @click.stop.self="close(momentType, momentId)"/>
      <a :href="Props.GAME_ID | gameDetailFilter">
        <div class="game_con">
        		<p class='con_title'>{{Props.GAME_NAME}}</p>
        		<p class="con_tips">报名人数超{{Props.EXCEED_NUM}}人</p>
        		<img class="gameHome" src="../assets/img/baominghot@2x.png" alt=""/>
        </div>
      </a>
      <slot></slot>
    </div>
</template>

<script>
import BottomBar from './common/BottomBar'
import MomentMixin from './MomentMixin'
import { gameDetailFilter } from '../filters/userFilter'

export default {
  name: 'live',
  props: {
    Props: Object
  },
  filters: {
    gameDetailFilter
  },
  mixins: [MomentMixin],
  components: {
    BottomBar
  }
}
</script>

<style lang="less" scoped>
@import "./common/mixins.less";
.live {
  .moment;
  position:relative;
	.label {
    position: absolute;
    left: -2px;
    top: 5px;
    width: 27px;
    height: 118px;
  }
  .close {
  	position: absolute;
  	right: 4px;
  	top: 0px;
  	width: 34px;
  	height: 24px;
  }
}
.game_con {
	width: 100%;
	height: 143px;
	box-sizing: border-box;
	padding-top: 38px;
	.con_title {
		@media screen {
      @media (max-width: 400px) {
        font-size: 16px;/*no*/
      }
      @media (min-width: 400px) {
        font-size: 18px;/*no*/
      }
    }
		color: #7C2628;
		margin-bottom: 11px;
    padding: 0 20px;
    .ellipsis();
	}
	.con_tips {
		@media screen {
      @media (max-width: 400px) {
        font-size: 12px;/*no*/
      }
      @media (min-width: 400px) {
        font-size: 14px;/*no*/
      }
    }
		font-size: 12px;/*no*/
		color: #777777;
		margin-bottom: 9px;
	}
}
.gameHome {
	text-align: center;
	width: 107px;
	height: 38px;
}
</style>
